<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="primary" @click="addOrUpdateHandle()">发布</el-button>
          <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="houseId" header-align="center" align="center" label="id">
        </el-table-column>
        <el-table-column prop="housePrice" header-align="center" align="center" label="金额（/平方）">
        </el-table-column>
        <el-table-column prop="houseName" header-align="center" align="center" label="房屋名">
        </el-table-column>
        <el-table-column prop="houseAddress" header-align="center" align="center" label="地址">
        </el-table-column>
        <el-table-column prop="houseArea" header-align="center" align="center" label="面积（m2)-">
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" label="状态(0.已卖 1.未卖)">
        </el-table-column>
        <el-table-column prop="houseDesc" header-align="center" align="center" label="户型(如1室1厅)">
        </el-table-column>
        <el-table-column prop="defaultImg" header-align="center" align="center" label="默认图片">
          <template slot-scope="scope">
            <img :src="scope.row.defaultImg" width="100px" height="100px" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="userId" header-align="center" align="center" label="发布经纪人">
        </el-table-column>
        <el-table-column prop="flag" header-align="center" align="center" label="标识（1，新房 2.二手房）">
        </el-table-column>
        <el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.houseId)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.houseId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[3, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <el-dialog :title="!newHouse.houseId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
        <el-form :model="newHouse" :rules="dataRule" ref="newHouse" @keyup.enter.native="newHouseSubmit()"
          label-width="140px">
          <el-form-item label="金额(/平方)" prop="housePrice">
            <el-input v-model="newHouse.housePrice" placeholder="金额(/平方)"></el-input>
          </el-form-item>
          <el-form-item label="房屋名" prop="houseName">
            <el-input v-model="newHouse.houseName" placeholder="房屋名"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="houseAddress">
            <el-input v-model="newHouse.houseAddress" placeholder="地址"></el-input>
          </el-form-item>
          <el-form-item label="面积(m2)" prop="houseArea">
            <el-input v-model="newHouse.houseArea" placeholder="面积(m2)"></el-input>
          </el-form-item>
          <!-- <el-form-item label="状态" prop="status">
            <el-input v-model="newHouse.status" placeholder="状态(0.已卖 1.未卖)"></el-input>
            <el-radio-group v-model="newHouse.status">
              <el-radio :label="0">已卖</el-radio>
              <el-radio :label="1">未卖</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="户型" prop="houseDesc">
            <!-- <el-input v-model="newHouse.houseDesc" placeholder="户型(如1室1厅)"></el-input> -->
            <el-radio-group v-model="newHouse.houseDesc">
              <el-radio-button label="一室一厅"></el-radio-button>
              <el-radio-button label="两室一厅"></el-radio-button>
              <el-radio-button label="三室一厅"></el-radio-button>
              <el-radio-button label="三室两厅"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="默认图片" prop="defaultImg">
            <!-- <el-input v-model="newHouse.defaultImg" placeholder="默认图片"></el-input> -->
            <template slot-scope="scope">
              <img :src="newHouse.defaultImg" width="100px" height="100px" alt="">
              <el-upload action="http://localhost:8888/api/house/newhouse/upload" class="upload-demo"
                :on-success="uploadFile" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
              </el-upload>
            </template>
          </el-form-item>
          <el-form-item label="标识" prop="flag">
            <!-- <el-input v-model="newHouse.flag" placeholder="标识(1，新房 2.二手房)"></el-input> -->
            <el-radio-group v-model="newHouse.flag">
              <el-radio :label="1">新房</el-radio>
              <el-radio :label="2">二手房</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <!-- <el-input v-model="newHouse.createTime" placeholder="创建时间"></el-input> -->
            <el-date-picker v-model="newHouse.createTime" type="datetime" placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item v-for="(item,index) in modelList" :label="item.group+':'">
            <span v-for="(item2,index) in item.params">
              {{item2.attrName}}<el-input v-model="item2.attrValue" placeholder="请输入内容"></el-input>
              <el-radio-group v-model="item2.searchFlag">
                <el-radio :label="1">可检索</el-radio>
                <el-radio :label="0">不可检索</el-radio>
              </el-radio-group>
              <br>
            </span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="newHouseSubmit()">确定</el-button>
        </span>
      </el-dialog>
    </div>

    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            modelList: [],
            token: localStorage.getItem("token"),
            baseUrl: "http://localhost:8888/api",
            dataForm: {
              key: ''
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 3,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            visible: false,
            newHouse: {
              houseId: 0,
              housePrice: '',
              houseName: '',
              houseAddress: '',
              houseArea: '',
              status: 3,
              houseDesc: '',
              defaultImg: '',
              userId: 0,
              flag: '',
              createTime: ''
            },
            fileList: [],
            dataRule: {
              housePrice: [
                { required: true, message: '金额(/平方)不能为空', trigger: 'blur' }
              ],
              houseName: [
                { required: true, message: '房屋名不能为空', trigger: 'blur' }
              ],
              houseAddress: [
                { required: true, message: '地址不能为空', trigger: 'blur' }
              ],
              houseArea: [
                { required: true, message: '面积(m2)-不能为空', trigger: 'blur' }
              ],
              houseDesc: [
                { required: true, message: '户型(如1室1厅)不能为空', trigger: 'blur' }
              ],
              defaultImg: [
                { required: true, message: '默认图片不能为空', trigger: 'blur' }
              ],
              flag: [
                { required: true, message: '标识(1，新房 2.二手房)不能为空', trigger: 'blur' }
              ],
              createTime: [
                { required: true, message: '创建时间不能为空', trigger: 'blur' }
              ]
            }
          }
        },
        watch: {
          'modelList' (val) {
            console.log(val);
          }
        },
        created () {
          this.getDataList()
        },
        //方法集合
        methods: {
          //获取模板信息
          getHouseModel (typeId) {
            axios.get(`${this.baseUrl}/house/houseattrkey/info/${typeId}`).then(({ data }) => {
              this.modelList = data.modelList
              console.log(this.modelList);
            })
          },
          uploadFile (response, file, fileList) {
            console.log(fileList)
            let imgurl = ""
            for (const key in fileList) {
              imgurl = imgurl + "," + fileList[key].response.url
            }
            this.newHouse.defaultImg = imgurl;
            // this.fileList.push({name:'图片',url:response.url})

          },
          handleRemove (file, fileList) {
            console.log(file, fileList);
            let imgurl = ""
            for (const key in fileList) {
              imgurl = imgurl + "," + fileList[key].response.url
            }
            this.newHouse.defaultImg = imgurl;

          },
          handlePreview (file) {
            console.log(file);
          },
          init (id) {
            this.newHouse.houseId = id || 0
            this.visible = true
            this.$nextTick(() => {
              this.$refs['newHouse'].resetFields()
              if (this.newHouse.houseId) {
                axios({
                  url: `${this.baseUrl}/house/newhouse/info/${this.newHouse.houseId}`,
                  method: 'get'
                }).then(({ data }) => {
                  if (data && data.code === 0) {
                    this.newHouse.housePrice = data.newHouse.housePrice
                    this.newHouse.houseName = data.newHouse.houseName
                    this.newHouse.houseAddress = data.newHouse.houseAddress
                    this.newHouse.houseArea = data.newHouse.houseArea
                    this.newHouse.status = data.newHouse.status
                    this.newHouse.houseDesc = data.newHouse.houseDesc
                    this.newHouse.defaultImg = data.newHouse.defaultImg
                    this.newHouse.userId = data.newHouse.userId
                    this.newHouse.flag = data.newHouse.flag
                    this.newHouse.createTime = data.newHouse.createTime
                    this.modelList = data.newHouse.attrKeys
                  }
                })
              }
            })
          },
          // 表单提交
          newHouseSubmit () {
            this.$refs['newHouse'].validate((valid) => {
              if (valid) {
                axios({
                  url: `${this.baseUrl}/house/newhouse/${!this.newHouse.houseId ? 'qianSave' : 'update'}`,
                  method: 'post',
                  data: {
                    'houseId': this.newHouse.houseId || undefined,
                    'housePrice': this.newHouse.housePrice,
                    'houseName': this.newHouse.houseName,
                    'houseAddress': this.newHouse.houseAddress,
                    'houseArea': this.newHouse.houseArea,
                    'status': this.newHouse.status,
                    'houseDesc': this.newHouse.houseDesc,
                    'defaultImg': this.newHouse.defaultImg,
                    'flag': this.newHouse.flag,
                    'createTime': this.newHouse.createTime,
                    'attrKeys': this.modelList
                  },
                  headers: {
                    token: this.token
                  }
                }).then(({ data }) => {
                  if (data && data.code === 0) {
                    this.$message({
                      message: '操作成功',
                      type: 'success',
                      duration: 1500,
                      onClose: () => {
                        this.visible = false
                        this.$emit('refreshDataList')
                      }
                    })
                    this.getDataList();
                  } else {
                    this.$message.error(data.msg)
                  }
                })
              }
            })
          },
          // 获取数据列表
          getDataList () {
            this.dataListLoading = true
            axios({
              url: `${this.baseUrl}/house/newhouse/qianList`,
              method: 'get',
              params: {
                'page': this.pageIndex,
                'limit': this.pageSize,
                'key': this.dataForm.key
              },
              headers: {
                token: this.token
              }
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataList = data.page.list
                this.totalPage = data.page.totalCount
              } else {
                this.dataList = []
                this.totalPage = 0
              }
              this.dataListLoading = false
            })
          },
          // 每页数
          sizeChangeHandle (val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
          },
          // 当前页
          currentChangeHandle (val) {
            this.pageIndex = val
            this.getDataList()
          },
          // 多选
          selectionChangeHandle (val) {
            this.dataListSelections = val
          },
          // 新增 / 修改
          addOrUpdateHandle (id = null) {
            this.visible = true

            if (id != null) {
              this.init(id);
            } else {
              this.getHouseModel(1);
              this.newHouse = {
                houseId: 0,
                housePrice: '',
                houseName: '',
                houseAddress: '',
                houseArea: '',
                status: 1,
                houseDesc: '',
                defaultImg: '',
                userId: 0,
                flag: '',
                createTime: ''
              }
            }
          },
          // 删除
          deleteHandle (id) {
            var ids = id ? [id] : this.dataListSelections.map(item => {
              return item.houseId
            })
            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              axios({
                url: `${this.baseUrl}/house/newhouse/delete`,
                method: 'post',
                data: ids,
                headers: {
                  token: this.token
                }
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.getDataList();
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
            })
          }
        },
      })
    </script>
</body>

</html>